﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="openMap.aspx.cs" Inherits="Demos_openMap" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxDocking" Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxPopupControl" Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>OpenLayer Page</title> 
        <%--<link rel="stylesheet" href="/css/ol.css" type="text/css"/>--%>
        <script src="/Scripts/ol.js" type="text/javascript"></script>
        <script type="text/javascript">
            // <![CDATA[
            var map = (function() {
                var openmap = null;
                var mapElementId = "map";

                function getMapElement() {
                    return document.getElementById(mapElementId);
                };

                function showMap() {
                    if (!openmap) {
                        createMap();
                    }
                };

                function createMap() {
                    if (typeof ol === "undefined") return;
                    if (openmap)
                        openmap.Dispose();

                    var layers = [
                        new ol.layer.Tile({
                            source: new ol.source.MapQuest({ layer: 'osm' })
                        }) //,

                        //new ol.layer.Tile({
                        //    source: new ol.source.TileWMS(({
                        //        url: 'http://10.141.132.183:50004/geoserver/wms',
                        //        params: { 'LAYERS': 'zhejiang', 'TILED': true },
                        //        serverType: 'geoserver'
                        //    }))
                        //})
                    ];

                    openmap = new ol.Map({
                        target: mapElementId,
                        layers: layers,
                        view: new ol.View({
                            center: ol.proj.transform([121.53825, 29.88145], 'EPSG:4326', 'EPSG:3857'),
                            zoom: 12
                        })
                    });

                    resizeMap();

                    openmap.zoom = 10;
                };

                function collapseMap() {
                    if (typeof ol === "undefined") return;
                    getMapElement().style.height = 0;
                    getMapElement().style.width = 0;
                };

                function resizeMap() {
                    if (typeof ol === "undefined") return;
                   if (popupMap.getCollapsed() || !openmap) return;
                    var mapElement = getMapElement();
                    var mapElementParentNode = mapElement.parentNode.parentNode;
                    mapElement.style.width = "100%";
                    mapElement.style.height = mapElementParentNode.clientHeight + "px";
                    openmap.Resize(mapElement.clientWidth, mapElementParentNode.clientHeight);
                };

                return {
                    showMap: showMap,
                    createMap: createMap,
                    collapseMap: collapseMap,
                    resizeMap: resizeMap
                };

            })();
            // ]]>
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
             <dx:ASPxPopupControl ID="PopupMap" runat="server" Width="400px" Height="400px"
                                 ShowPinButton="True" ShowRefreshButton="True" ShowCollapseButton="True" ShowMaximizeButton="True" 
                                 ClientInstanceName="popupMap" PopupElementID="popupArea" ShowOnPageLoad="True" ShowSizeGrip="True"
                                 PopupVerticalAlign="TopSides" PopupHorizontalAlign="LeftSides"
                                 AllowDragging="True" AllowResize="True" CloseAction="CloseButton" HeaderText="地图" ShowFooter="True" FooterText="" PopupAnimationType="Fade">
         
                <ContentStyle Paddings-Padding="0">
                </ContentStyle>
                <ClientSideEvents Shown="map.showMap" EndCallback="map.createMap" 
            BeforeResizing="map.collapseMap" Resize="map.resizeMap" AfterResizing="map.resizeMap"></ClientSideEvents>
                
                <ContentCollection>  
                    <dx:popupControlContentControl>
                        <div id="map"  style="position: relative;"></div>
                    </dx:popupControlContentControl>
                </ContentCollection> 
            </dx:ASPxPopupControl>
        </form>
    </body>
</html>